.chatRoom {
  width: 85%;
  height: 93vh;
  margin-top: 6vh;
  display: grid;
  grid-template-rows: 10% 80% 10%;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5); /* 设置半透明的背景颜色 */
  .titleArea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      font-size: 28px;
      margin-left: 15px;
    }
    .right {
      margin-right: 10px;
      .point {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #00ff22;
        border-radius: 50%;
      }
    }
  }
  .contentArea {
    .messageList {
      padding: 10px;
      overflow-y: auto; /* 如果消息列表超出高度，显示滚动条 */
      max-height: 100%; /* 设置消息列表的最大高度 */
    }
    .messageList::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    .messageItem {
      display: flex;
      align-items: flex-start; /* 使消息项内容顶部对齐 */
      margin-bottom: 10px;
    }

    .messageContent {
      margin-left: 10px;
      background-color: #f0f0f0; /* 消息内容区域的背景色 */
      padding: 8px;
      border-radius: 8px; /* 圆角边框 */
      max-width: 70%; /* 最大宽度为父容器的70% */
    }

    .messageInfo {
      display: flex;
      justify-content: space-between; /* 姓名和时间信息之间的空间 */
      margin-bottom: 5px;
    }

    .messageName {
      font-weight: bold; /* 姓名文本加粗 */
    }

    .messageTime {
      color: #888; /* 时间文本颜色 */
    }

    .messageText {
      word-wrap: break-word; /* 文本自动换行 */
    }
    .ownMessageItem {
      display: flex;
      justify-content: flex-end; /* 右对齐 */
    }

    .otherMessageItem {
      display: flex;
      justify-content: flex-start; /* 左对齐 */
    }
  }
  .inputArea {
    display: flex;
    align-items: center;
    justify-content: center;
    .input {
      display: grid;
      grid-template-columns: 60px 79% 11%;
      width: 90%;
      height: 58%;
      .inputEmoji {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .inputIcon {
        width: 54px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
